<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>店铺查询</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/shoplist.css"/>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
</head>
<body>
    <div class="container" id="returnindex">
        <div class="row">
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="goodsmanage"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="ordermanage"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"><a href="index.html">返回首页</a></div>
        </div>
    </div>
    <div class="container" id="top">
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo">乐享生活</div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
            <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7" id="search">
                <div id="type"><button class="type_choise" id="searchgoods">商品</button><button class="type_unchoise" id="searchshop">店铺</button></div>
                <input type="text" id="search_what"/><button id="search_btn">搜索</button>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 title">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">店铺</div>
                <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">商品</div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" id="shoplist">
            </div>
        </div>
    </div>

    <script type="text/javascript">


        $("#searchshop").click(function () {
            $("#searchshop").addClass("type_choise");
            $("#searchshop").removeClass("type_unchoise");

            $("#searchgoods").addClass("type_unchoise");
            $("#searchgoods").removeClass("type_choise");
        });

        $("#searchgoods").click(function () {

            $("#searchgoods").addClass("type_choise");
            $("#searchgoods").removeClass("type_unchoise");

            $("#searchshop").addClass("type_unchoise");
            $("#searchshop").removeClass("type_choise");
        });


        $("#search_btn").click(function () {
            var what = $("#search_what").val();

            if ($("#searchgoods").hasClass("type_choise")){
                location.href = "goodslist.html?search=" + what + "&page=1";
            }

            if ($("#searchshop").hasClass("type_choise")) {
                location.href = "shoplist.html?search=" + what + "&page=1";
            }

        });

        var what = decodeURIComponent(location.search.split("=")[1].split("&")[0]);

        var page = location.search.split("=")[2];

        $.post("shop/getShopList",{what:what,page:page,pageSize:8},function (data) {

            data = JSON.parse(data);

            var ht = '';

            for (var i = 0; i < data.shops.length; i++) {

                ht += ' <div class="row listrow">\n' +
                    '                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">\n' +
                    '                        <div class="row">\n' +
                    '                            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>\n' +
                    '                            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">\n' +
                    '                                <img class="shopimg" src="/FVOnline/shop/getHS?userId='+ data.shops[i].user.id +'">\n' +
                    '                            </div>\n' +
                    '                            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 shoptopdetails">\n' +
                    '                                <a href="shopdetails.html?shopid='+ data.shops[i].id +'&page=1">'+ data.shops[i].shopname +'</a><br>\n' +
                    '                                <p style="display: inline">卖家：'+ data.shops[i].user.username +'</p>\n' +
                    '                            </div>\n' +
                    '                        </div>\n' +
                    '                        <div class="row shopbotdetails">\n' +
                    '                            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>\n' +
                    '                            <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11"><p>销量'+ data.shops[i].sellnum +'，共'+ data.shops[i].goodsnum +'件商品</p></div>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">\n' +
                    '                        <div class="row goodsrow">\n';
                for (var j = 0; j < data.shops[i].goodsList.length; j++) {
                    ht += '<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 goods" id="goods_'+ data.shops[i].goodsList[j].id +'"><img class="goodsimg" src="/FVOnline/goods/getImg?goodsId='+ data.shops[i].goodsList[j].id +'"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;￥'+ data.shops[i].goodsList[j].price +'</p></div>\n'
                }

                ht +=       '</div>\n' +
                        '</div>\n' +
                    '</div>\n';


            }

            ht += '<div id="pageinfo">共'+ Math.ceil(data.total/8) +'页，当前为第'+ page +'页<button id="prev">上一页</button><button id="next">下一页</button>第<input type="text" id="pageto" oninput = "value = value.replace(/[^\\d]/g,\'\')")>页<button id="goto">跳转</button></div>'
            $("#shoplist").html(ht);

            for (var i = 0; i < data.shops.length; i++) {
                for (var j = 0; j < data.shops[i].goodsList.length; j++) {
                    $("#goods_" + data.shops[i].goodsList[j].id).click(function () {
                        var id = this.id.split("_")[1];
                        location.href = "goodsdetails.html?goodsid=" + id;
                    });
                }
            }

            $("#prev").click(function () {
                if (page != 1){
                    location.href = "shoplist.html?search=" + what + "&page=" + (parseInt(page) - 1);
                }
            });

            $("#next").click(function () {
                if (page != Math.ceil(data.total/8)){
                    location.href = "shoplist.html?search=" + what + "&page=" + (parseInt(page) + 1);
                }
            });

            $("#goto").click(function () {
                var topage = $("#pageto").val()
                if (topage > 0 && topage <= Math.ceil(data.total/8)) {
                    location.href = "shoplist.html?search=" + what + "&page=" + topage;
                }
            });

        });

    </script>
</body>
</html>